<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>管理</title>
    <meta name="author" content="尘跃" />

    <!-- style -->
    <link rel="stylesheet" href="/css/old/style.css">
    <link rel="stylesheet" href="/css/old/style-fit.css">
    <link rel="stylesheet" href="/css/editor.css">
    <link rel="stylesheet" href="/css/old/admin.css">

    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>
    <!-- WX JS SDK -->
    <script src="/js/wx.js"></script>
</head>
<body>

    <div id="app">
        <nav class="sidebar">
            <ul class="sidebar-list">
                <li class="sidebar-list-item" @click="clickArticleManage">文章管理</li>
                <!-- <li class="sidebar-list-item" @click="clickSortManage">分类管理</li> -->
                <li class="sidebar-list-item" @click="clickArticlePublish">发布文章</li>
            </ul>
        </nav>

        <div class="panel">

            <!-- 文章管理 -->
            <div
                class="panel-article-manage"
                v-if="currentPanel === '文章管理'"
            >
                <h1 class="panel-title">文章管理</h1>

                <ul class="panel-list">
                    <li class="panel-list-item" v-for="item in articleDataSource">
                        <a class="panel-list-item-title" :href="'/pages/article.html?id=' + item.id" target="_blank">{{ item.title }}</a>
                        <div>

                        </div>
                    </li>
                </ul>
            </div>


            <!-- 分类管理 -->
            <div
                class="panel-sort-manage"
                v-if="currentPanel === '分类管理'"
            >
                <h1 class="panel-title">分类管理</h1>
            </div>

            <!-- 发布文章面板 -->
            <form
                class="panel-article-publish"
                v-show="currentPanel === '发布文章'"
                @submit.prevent="clickPublishArticle"
            >
                <h1 class="panel-title">发布文章</h1>

                <!-- 标题输入区域 -->
                <div class="panel-input-title">
                    <label for="input-title">文章标题</label>
                    <input id="input-title" required type="text" name="title">
                </div>

                <!-- 日期输入区域 -->
                <div class="panel-input-date">
                    <label for="input-date">日期</label>
                    <input id="input-date" required type="date" name="date" ref="dateInput">
                </div>

                <!-- 转载 -->
                <div class="panel-input-reprint">
                    <label for="input-checkbox-reprint">
                        <input id="input-checkbox-reprint" type="checkbox" name="reprint" value="reprint">转载
                    </label>
                    <input id="input-author" type="text" :disabled="!reprintCheck" placeholder="作者">
                    <div class="flex-row flex-items-center">
                        <input
                            id="input-author-homepage"
                            type="url"
                            pattern="http(s)?://.*"
                            :disabled="!reprintCheck"
                            placeholder="作者主页"
                        >
                        <span></span>
                    </div>
                </div>

                <!-- 内容输入区域 -->
                <div class="cyue-editor" ref="editor"></div>


                <!-- 文章分类输入区域 -->
                <div class="panel-input-sort">
                    <label>文章分类</label>
                    <select name="sort" ref="sortSelect" required>
                        <option value="">请选择分类</option>
                    </select>
                </div>


                <!-- 发布按钮区域 -->
                <div class="panel-input-publish">
                    <input type="submit" class="panel-input-publish-button" value="发布"></button>
                </div>
            </form>

        </div>
    </div>


    <!-- style -->
    <script src="/js/style.js"></script>

    <script src="/js/http.js"></script>
    <script src="/js/dialog.js"></script>
    <!-- 编辑器 -->
    <script src="/js/editor.js"></script>
    <!-- 图片压缩 -->
    <script src="/js/third/compressor.min.js"></script>
    <!-- 页面功能 -->
    <script src="/js/admin.js"></script>
</body>
</html>




